// The .responsive-table class is added by an eleventy transform.
// Authors should not need to manually add it themselves.
.responsive-table {
  overflow-x: auto;

  > table {
    min-width: px-to-rem(512px);
  }

  &::-webkit-scrollbar {
    height: px-to-rem(6px);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-hairline);
  }
}

table {
  border: 1px solid var(--color-hairline);
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  overflow-x: scroll;

  // stylelint-disable selector-no-qualifying-type
  &.with-borders {
    th:not(:last-of-type),
    td:not(:last-of-type) {
      border-right: 1px solid var(--color-hairline);
    }
  }

  &.with-heading-tint {
    thead {
      background-color: var(--color-bg-shade);
    }
  }
}

th {
  @include apply-utility('weight', 'medium');
}

th,
td {
  padding: get-size(300);
}

tr:not(:last-of-type),
tr:only-of-type {
  border-bottom: 1px solid var(--color-hairline);
}

caption {
  border-top: 1px solid var(--color-hairline);
  caption-side: bottom;
  padding: get-size(300);
}

table ul,
table ol {
  margin-left: 1.5rem !important;
  max-width: initial !important;
}
